const { ipcRenderer } = require('electron');

// 获取DOM元素
const currentStatusBadge = document.getElementById('current-status-badge');
const defaultStatusList = document.getElementById('default-status-list');
const customStatusList = document.getElementById('custom-status-list');
const newStatusName = document.getElementById('new-status-name');
const newStatusColor = document.getElementById('new-status-color');
const newStatusDesc = document.getElementById('new-status-desc');
const addStatusBtn = document.getElementById('add-status-btn');
const closeBtn = document.getElementById('close-status-manager');

// 状态数据
let statuses = {
    default: [],
    custom: [],
    current: null
};

// 初始化
window.addEventListener('DOMContentLoaded', () => {
    // 请求获取状态数据
    ipcRenderer.send('get-status-data');
});

// 监听从主进程发送的状态数据
ipcRenderer.on('status-data', (event, data) => {
    statuses = data;
    renderStatuses();
});

// 渲染状态列表
function renderStatuses() {
    // 更新当前状态显示
    if (statuses.current) {
        currentStatusBadge.textContent = statuses.current.name;
        currentStatusBadge.style.backgroundColor = statuses.current.color;
    }
    
    // 渲染默认状态
    defaultStatusList.innerHTML = '';
    statuses.default.forEach(status => {
        const statusElement = createStatusElement(status, false);
        defaultStatusList.appendChild(statusElement);
    });
    
    // 渲染自定义状态
    customStatusList.innerHTML = '';
    statuses.custom.forEach(status => {
        const statusElement = createStatusElement(status, true);
        customStatusList.appendChild(statusElement);
    });
}

// 创建状态元素
function createStatusElement(status, isCustom) {
    const statusItem = document.createElement('div');
    statusItem.className = 'status-item';
    
    statusItem.innerHTML = `
        <div class="status-item-info">
            <span class="status-item-badge" style="background-color: ${status.color}">${status.name}</span>
            <div>
                <div class="status-item-name">${status.name}</div>
                ${status.description ? `<div class="status-item-desc">${status.description}</div>` : ''}
            </div>
        </div>
        <div class="status-item-actions">
            <button class="status-item-btn set-status-btn" data-id="${status.id}">设置</button>
            ${isCustom ? `
                <button class="status-item-btn edit-status-btn" data-id="${status.id}">编辑</button>
                <button class="status-item-btn delete-status-btn" data-id="${status.id}">删除</button>
            ` : ''}
        </div>
    `;
    
    // 添加事件监听器
    statusItem.querySelector('.set-status-btn').addEventListener('click', () => {
        ipcRenderer.send('set-current-status', status);
    });
    
    if (isCustom) {
        statusItem.querySelector('.edit-status-btn').addEventListener('click', () => {
            // 这里可以实现编辑功能
            alert('编辑功能待实现');
        });
        
        statusItem.querySelector('.delete-status-btn').addEventListener('click', () => {
            if (confirm(`确定要删除状态"${status.name}"吗？`)) {
                ipcRenderer.send('delete-custom-status', status.id);
            }
        });
    }
    
    return statusItem;
}

// 添加新状态
addStatusBtn.addEventListener('click', () => {
    const name = newStatusName.value.trim();
    const color = newStatusColor.value;
    const description = newStatusDesc.value.trim();
    
    if (!name) {
        alert('请输入状态名称');
        return;
    }
    
    ipcRenderer.send('add-custom-status', { name, color, description });
    
    // 清空表单
    newStatusName.value = '';
    newStatusColor.value = '#28a745';
    newStatusDesc.value = '';
});

// 关闭窗口
closeBtn.addEventListener('click', () => {
    ipcRenderer.send('close-status-manager');
});

// 监听状态更新
ipcRenderer.on('status-updated', (event, data) => {
    statuses = data;
    renderStatuses();
});